iT邦幫忙

DAY 5
1

Sass3.3 & CSS設計模式系列 第 6

Sass教學 (5) - susy2 - 960Grid 流體版型(Fulid layout),susy1>susy2

  • 分享至 

  • xImage
  •  

Yes
影片教學請點選下圖連結↓

以下文章同步於Github

這次我們要來使用susy2的核心來設計susy1的grid system。

程式碼連結
sassmeister-susy2 960grid fulid、gutter-position after
sassmeister-susy1 960grid

在上個章節我們使用了gutter-position:split來完整實踐960 grid system,
以前susy1則是用gutter-position: after來設計Grid的,
split是margin-left與right來推擠出gutter,
after則是直接用margin-right來推。

我們先來看susy1是怎麼設計Grid的:

@import 'compass';
@import 'susyone'; 
$total-columns : 12;
$column-width  : 60px;
$gutter-width  : 20px;
$grid-padding  : 10px;
.container {
  @include container() ;
  padding: 0 10px;
  height:500px; 
  @include susy-grid-background;
}
.black {
  background:#000;
  color:#fff;
  @include span-columns(1);
  height:100px;
}
.blue{
  background:blue;
  color:#fff;
  @include span-columns(11 omega); //用omega消掉margin-right的gutter
  height: 100px;
}
//編譯出的css
.black {
  background: #000;
  color: #fff;
  width: 6.38298%;
  float: left;
  margin-right: 2.12766%;
  display: inline;
  height: 100px;
}
.blue {
  background: blue;
  color: #fff;
  width: 91.48936%;
  float: right;
  margin-right: 0;
  *margin-left: -20px;
  display: inline;
  height: 100px;
}

你可以從上面程式碼編譯出的.black看出來,
susy1在gutter處理上就只是單純用margin-right來去做推擠,
如果你今天要設計雙欄滿版的Grid的時候,
你必須在span-columns(11 omega)括號裡面的數字後面加上個omega,
這樣編譯出來的Div就會變成float:right;margin-right:0, 因為12欄只有11個gutter,
所以你必須把最後一個div的gutter用omega消掉才可以,

而susy2則是這樣子寫,

@import 'compass';
@import 'susy'; 
$susy: (
 columns:12,
 math: fulid,
 column-width:60px,
 gutter-position: after,
 gutters:1/3,
);
.container {
  @include container() ;
  padding: 0 10px;
   height:500px; 
}
.black {
  background:#000;
  color:#fff;
  @include span(1);
  height:100px;
}
.blue{
  background:blue;
  color:#fff;
  @include span(11 last);
  height: 100px;
}

susy1的span-columns和susy2的spanMixin功能是一樣的,
但span的Mixin又多了很多功能可以使用,
這個後面再來一次講,
我們先來一一拆解上面的程式碼:
上面的.container編譯出來的寬度會是940px,
因為我希望左右邊他會留白,
但susy的變數並沒有提供這個功能,
所以我就自己在.container上加上padding:0 10px,
這樣加起來就剛好等於960px,
Grid就能剛好等於susy1的Grid。


上一篇
Sass教學 (4) - susy2 - 960Grid固定版型(Fixed layout)設計
下一篇
Sass教學 (6) - Sass 3.3 - 參考父選擇符:&
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言